<style scoped>
  .login {
    width: 100%;
    height: 100%;
    color: white;
    background-image: url("../assets/loginBg.jpeg");
  }
</style>
<template>
  <div class="login">
    <div style="height:1080px;padding-top: 350px" v-if="login">
      <Card style="width:480px;margin: 0 auto;background: rgba(255,255,255,0.1);border-color:#ccc ">
        <div style="text-align:center">
          <h1 style="color: rgba(	245,245,245,0.8)">欢迎登录小幸运任务管理系统</h1>
          <Form ref="loginFrom" :model="loginFrom" :rules="ruleInline" inline style="margin-top: 10px " @keydown.enter.native.prevent="handleSubmit('loginFrom')">
            <Row>
              <Col span="24">
                <FormItem prop="userName">
                  <Input type="text" v-model="loginFrom.userName" placeholder="请输入账号" style="width: 280px">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                  </Input>
                </FormItem>
              </Col>
              <Col span="24">
                <FormItem prop="pwd">
                  <Input type="password" v-model="loginFrom.pwd" placeholder="请输入密码" style="width: 280px">
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                  </Input>
                </FormItem>
              </Col>
              <Col span="24">
                <FormItem>
                  <img :src="imgUrl" width="100px" @click="resetImg">
                </FormItem>
                <FormItem prop="number">
                  <Input type="text" v-model="loginFrom.number" placeholder="请输入验证码" style="width: 180px">
                  </Input>
                </FormItem>
              </Col>
              <Col span="24">
                <a @click="login=!login">没有账号，去注册</a>
              </Col>
              <Col span="12" push="2">
                <FormItem prop="remember">
                  <CheckboxGroup v-model="loginFrom.remember">
                    <Checkbox label="1" value="1">记住密码</Checkbox>
                  </CheckboxGroup>
                </FormItem>
              </Col>
              <Col span="12" pull="2">
                <FormItem prop="allStill">
                  <CheckboxGroup v-model="loginFrom.allStill">
                    <Checkbox label="1" value="1">7天免登录</Checkbox>
                  </CheckboxGroup>
                </FormItem>
              </Col>
              <Col span="24">
                <FormItem>
                  <Button type="primary" @click="handleSubmit('loginFrom')">登录</Button>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="handleReset('loginFrom')">重置</Button>
                </FormItem>
              </Col>
            </Row>

          </Form>
        </div>
      </Card>

    </div>
    <div style="height:1080px;padding-top: 350px" v-if="!login">
      <Card style="width:480px;margin: 0 65%;background: rgba(255,255,255,0.1);border-color:#ccc ">
        <div style="text-align:center">
          <h1 style="color: rgba(	245,245,245,0.8)">注册账号</h1>
          <a @click="login=!login">已有账号，去登录</a>
          <Form ref="addFrom" :model="addFrom" :rules="ruleInline" inline style="margin-top: 10px ">
            <Row>
              <Col span="24">
                <FormItem prop="userName">
                  <Input type="text" v-model="addFrom.userName" placeholder="请输入账号" style="width: 280px">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                  </Input>
                </FormItem>
              </Col>
              <Col span="24">
                <FormItem prop="pwd">
                  <Input type="password" v-model="addFrom.pwd" placeholder="请输入密码" style="width: 280px">
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                  </Input>
                </FormItem>
              </Col>
              <Col span="24">
                <FormItem prop="uNick">
                  <Input type="text" v-model="addFrom.uNick" placeholder="请输入昵称" style="width: 280px">
                    <Icon type="ios-barcode" slot="prepend"></Icon>
                  </Input>
                </FormItem>
              </Col>

              <Col span="24">
                <FormItem>
                  <Button type="primary" @click="handleSubmit('addFrom')">注册</Button>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="handleReset('addFrom')">重置</Button>
                </FormItem>
              </Col>
            </Row>

          </Form>
        </div>
      </Card>

    </div>
  </div>
</template>
<script>
  import axios from 'axios';

  export default {
    name: 'login',
    components: {},
    data() {
      return {
        imgUrl:'http://localhost:8888/checkImage',//验证码地址
        login:true,
        userData:{
          id:'',
          uAdmin: "",
          uNick: "",
          userInt: null,
          userName: "",
          vipTime: null
        },
        loginFrom: {//登录表单内容
          userName: '',
          pwd: '',
          number: '',
          remember: [],
          allStill: []
        },
        addFrom: {//注册表单内容
          userName: '',
          pwd: '',
          uNick:''
        },
        ruleInline: {
          userName: [
            {required: true, message: '请输入您的账号', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '请输入密码.', trigger: 'blur'},
            {type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '请输入验证码.', trigger: 'blur'},
            {type: 'string', min: 4, max: 4, message: '验证码位4位', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      resetImg() {
        this.imgUrl = "http://localhost:8888/checkImage?"+new Date()
      },
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (name=='loginFrom'){
              axios.get('http://localhost:8888/login', {params: this.loginFrom}).then(res => {
                if (res.data != undefined && res.data != '') {
                  this.$Message.success('登录成功，欢迎访问！');
                  this.$setCookie("userId",res.data.id)
                  this.$setCookie("uNick",res.data.unick)
                  this.$setCookie("userName",res.data.userName)
                  this.$setCookie("admin",res.data.uadmin)
                  this.$setCookie("userInt",res.data.userInt)
                  this.$setCookie("vipTime",res.data.vipTime)
                  this.userData = res.data
                  if (this.userData.id){
                    this.$router.push({path: '/'});
                  }else{
                    this.$Message.error('登录信息异常!');
                  }
                } else {
                  this.$Message.error('账号密码错误!');
                  this.resetImg()
                }
              })
            }else if(name=='addFrom'){
              axios.get('http://localhost:8888/addUser', {params: this.addFrom}).then(res => {
                if (res && res.status == 200){
                  if (res.data != undefined && res.data != '') {
                    this.$Message.success('注册成功，去登录！');
                  } else {
                    this.$Message.error('注册失败!');
                  }
                }else {
                  this.$Message.error('注册失败!');
                }
              })
            }

          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      handleReset(name) {
          this.$refs[name].resetFields();
      }
    },
    mounted() {
      // console.log(this.getToken())
    }
  }
</script>
